<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList&&bannerImgList.length>0"
      class="banner-bg"
      :src="returnImg(bannerImgList[0].indexImg)"
      :alt="bannerImgList[0].indexTitle"
    >
    <div class="banner-title" v-if="bannerImgList&&bannerImgList.length>0">
      <h3>{{bannerImgList[0].indexName}}</h3>
      <p>{{bannerImgList[0].indexContent}}</p>
    </div>
    <div class="tab-box">
      <div class="tab-operation">
        <div class="tab-title">解决方案</div>
        <div class="tab-item" v-if="tabList&&tabList.length>0">
          <span
            v-for="(item,index) in tabList"
            :key="index"
            :class="activeIndex===index?'active':''"
            @click="scrollToPosition(item,index)"
          >{{item.indexName}}</span>
        </div>
      </div>
    </div>
    <div class="why-select-me about-model-us" v-if="riskControl && riskControl.length>0">
      <h3 class="title">{{riskControl[0].indexTitle}}</h3>
      <span class="index-model-line"></span>
      <div class="select-me-box">
        <img :src="returnImg(riskControl[0].indexImg)" :alt="riskControl[0].indexTitle">
        <div class="article-box">
          <!-- <h3 class="article-title">{{productOverview[0].indexName}}</h3> -->
          <p class="article-content">{{riskControl[0].indexContent}}</p>
        </div>
      </div>
    </div>
    <div class="comprehensive" v-if="coreAdvantage&&coreAdvantage.length>0">
      <h3 class="title">核心优势</h3>
      <span class="index-model-line"></span>
      <img :src="returnImg(coreAdvantage[0].indexImg)" :alt="coreAdvantage[0].indexTitle">
    </div>
    <div class="empowerYou">
      <h3 class="title">智远如何为您赋能</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li class="select-me-item" v-for="(item,index) in empowerYou" :key="index">
          <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
          <h3>{{item.indexName}}</h3>
          <p>{{item.indexContent}}</p>
        </li>
      </ul>
    </div>
    <div class="customerCase">
      <h3 class="title">客户案例</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <div class="right" @click="handlerRight">
          <el-icon>
            <ArrowRightBold/>
          </el-icon>
        </div>
        <div class="left" @click="handlerLeft">
          <el-icon>
            <ArrowLeftBold/>
          </el-icon>
        </div>
        <li
          class="select-me-item"
          v-for="(item,index) in customerCase"
          :key="index"
          v-show="activeImgIndex === index"
        >
          <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
          <div class="img-box">
            <img :src="returnImg(item.indexTitle)" :alt="item.indexTitle">
            <p>{{item.indexContent}}</p>
          </div>
        </li>
      </ul>
    </div>
    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import { menuGetModuleContent } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      certificationList: null,
      activeImg: "",
      bannerImgList: [],
      tabList: [],
      activeIndex: 0,
      aboutUs: null,
      enterpriseCulture: null,
      actionId: "",
      productOverview: [],
      nineAdvantages: [],
      schemeValue: [],
      riskControl: [],
      coreAdvantage: [],
      empowerYou: [],
      customerCase: [],
      activeImgIndex: 0
    };
  },
  mounted() {
    this.menuGetModuleContent();
    this.getSolutionTab(this.$route.query.id);
    this.getRiskControl(this.$route.query.id);
    this.getCoreAdvantage(this.$route.query.id);
    this.getEmpowerYou(this.$route.query.id);
    this.getCustomerCase(this.$route.query.id);
  },
  methods: {
    scrollToPosition(item, index) {
      this.activeIndex = index;
      this.getRiskControl(item.id);
      this.getCoreAdvantage(item.id);
      this.getEmpowerYou(item.id);
      this.getCustomerCase(item.id);
    },
    handlerLeft() {
      if (this.activeImgIndex === 0) {
        this.activeImgIndex = this.customerCase.length - 1;
      } else {
        this.activeImgIndex -= 1;
      }
    },
    handlerRight() {
      if (this.activeImgIndex === this.customerCase.length - 1) {
        this.activeImgIndex = 0;
      } else {
        this.activeImgIndex += 1;
      }
    },
    returnImg(url) {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    },
    handleChangeImg(item) {
      this.activeImg = item.indexImg;
    },
    menuGetModuleContent() {
      let param = {
        id: 201
      };
      menuGetModuleContent(param).then(res => {
        this.bannerImgList = res.data;
      });
    },
    getSolutionTab() {
      let param = {
        id: this.$route.query.actionId + "207"
      };
      menuGetModuleContent(param).then(res => {
        this.tabList = res.data;
      });
    },
    // 获取智能风控
    getRiskControl(val) {
      this.riskControl = [];
      let param = {
        id: val + "208"
      };
      menuGetModuleContent(param).then(res => {
        this.riskControl = res.data;
      });
    },
    // 获取核心优势
    getCoreAdvantage(val) {
      this.coreAdvantage = [];
      let param = {
        id: val + "209"
      };
      menuGetModuleContent(param).then(res => {
        this.coreAdvantage = res.data;
      });
    },
    // 如何为您赋能
    getEmpowerYou(val) {
      this.empowerYou = [];
      let param = {
        id: val + "210"
      };
      menuGetModuleContent(param).then(res => {
        this.empowerYou = res.data;
      });
    },
    // 客户案例
    getCustomerCase(val) {
      this.customerCase = [];
      this.activeImgIndex = 0;
      let param = {
        id: val + "211"
      };
      menuGetModuleContent(param).then(res => {
        this.customerCase = res.data;
      });
    }
  }
};
</script>
<style scoped lang="scss">
.banner-bg {
  width: 100%;
  height: 420px;
}
.banner-title {
  position: absolute;
  top: 192px;
  left: 160px;
  width: 582px;
  text-align: left;
  h3 {
    font-size: 28px;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 32px;
  }
  p {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 40px;
  }
}
.why-select-me {
  width: 100%;
  height: 544px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 1200px;
    height: 218px;
    margin-top: 56px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    img {
      width: 378px;
      height: 100%;
      margin-right: 28px;
    }
    .article-box {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .article-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 24px;
        color: #323233;
        letter-spacing: 0;
        margin-bottom: 21px;
      }
      .article-content {
        font-size: 16px;
        color: #323233;
        letter-spacing: 0;
        line-height: 32px;
        text-align: left;
        padding-top: 20px;
        box-sizing: border-box;
      }
    }
  }
}
.comprehensive {
  width: 100%;
  height: 770px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 1200px;
    height: 500px;
    margin-top: 56px;
  }
}
.empowerYou {
  width: 100%;
  height: 676px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 1200px;
    height: 350px;
    margin-top: 56px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .select-me-item {
      width: 288px;
      height: 100%;
      background: #f7f8fb;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 17, 67, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      box-sizing: border-box;
      &:nth-of-type(4) {
        margin-right: 0;
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        border: 1px solid #1790ff;
      }
      img {
        width: 40px;
        height: 40px;
      }
      h3 {
        font-size: 24px;
        color: #323233;
        width: 100%;
        text-align: left;
        line-height: 28px;
        margin-top: 24px;
        text-align: center;
      }
      p {
        font-size: 16px;
        color: #909399;
        letter-spacing: 0;
        // line-height: 36px;
        text-align: left;
        margin-top: 14px;
        text-align: justify;
      }
    }
  }
}

.customerCase {
  width: 100%;
  height: 622px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .select-me-box {
    width: 1200px;
    height: 296px;
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .left {
      width: 40px;
      height: 40px;
      text-align: center;
      position: absolute;
      top: 30px;
      right: 90px;
      border: 1px solid #efefef;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .right {
      width: 40px;
      height: 40px;
      text-align: center;
      position: absolute;
      top: 30px;
      right: 30px;
      border: 1px solid #efefef;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .select-me-item {
      width: 100%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 8px 28px 0 rgba(0, 17, 67, 0.1);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 16px;
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        // border: 1px solid #1790ff;
        box-sizing: border-box;
      }
      img {
        width: 240px;
        height: 264px;
        margin-right: 56px;
      }
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        height: 100%;
        img {
          width: 160px;
          height: 40px;
          margin-top: 20px;
        }
        p {
          font-size: 14px;
          color: #323233;
          letter-spacing: 0;
          text-align: justify;
          line-height: 28px;
          margin-top: 24px;
        }
      }
    }
  }
}
.title {
  width: 1200px;
  font-size: 40px;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 96px;
  position: relative;
}
.details {
  font-size: 14px;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 32px;
}
.showMore {
  font-size: 16px;
  color: #909399;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
.tab-box {
  width: 100%;
  height: 60px;
  background: #f1f4f8;
  .tab-operation {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .tab-title {
      padding-right: 16px;
      font-family: MicrosoftYaHei-Bold;
      font-size: 14px;
      color: #323233;
      letter-spacing: 0;
      position: relative;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 8px;
        background: #cad6ec;
        right: 0;
        top: 6px;
      }
    }
    .tab-item {
      margin-left: 16px;
      display: flex;
      span {
        margin-right: 40px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #323233;
        letter-spacing: 0;
        cursor: pointer;
        &.active {
          color: #1790ff;
        }
      }
    }
  }
}
@media only screen and (max-device-width: 768px) {
  .banner-bg {
    // height: auto;
    top: 140px;
  }
  .banner-title {
    width: 92%;
    top: 120px;
    left: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    h3 {
      font-size: 30px;
      margin-bottom: 15px;
    }
  }
  .tab-box {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
    .tab-operation {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      .tab-title {
        padding-right: 16px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 14px;
        color: #323233;
        letter-spacing: 0;
        position: relative;
        font-weight: bold;
      }
    }
  }
  .why-select-me {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
        margin-right: 0;
      }
      .article-box {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .article-title {
          font-family: MicrosoftYaHei-Bold;
          font-size: 24px;
          color: #323233;
          letter-spacing: 0;
          margin-bottom: 21px;
        }
        .article-content {
          font-size: 16px;
          color: #323233;
          letter-spacing: 0;
          line-height: 32px;
          text-align: left;
          padding-top: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .comprehensive {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    img {
      width: 100%;
      height: auto;
      margin-top: 56px;
    }
  }
  .empowerYou {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      .select-me-item {
        width: 100%;
        height: 350px;
        margin-bottom: 20px;
      }
    }
  }

  .customerCase {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .left {
        width: 40px;
        height: 40px;
        text-align: center;
        position: absolute;
        top: 30px;
        right: 90px;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .right {
        width: 40px;
        height: 40px;
        text-align: center;
        position: absolute;
        top: 30px;
        right: 30px;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .select-me-item {
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-shadow: 0 8px 28px 0 rgba(0, 17, 67, 0.1);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          // border: 1px solid #1790ff;
          box-sizing: border-box;
        }
        img {
          width: 100%;
          height: auto;
          margin-right: 0;
        }
        .img-box {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex: 1;
          height: 100%;
          img {
            width: 160px;
            height: 40px;
            margin-top: 20px;
          }
          p {
            font-size: 14px;
            color: #323233;
            letter-spacing: 0;
            text-align: justify;
            line-height: 28px;
            margin-top: 24px;
          }
        }
      }
    }
  }
  .title {
    width: 100%;
    font-size: 40px;
  }
}
</style>